<!-- 首页 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书瞳</title>
    <link rel="icon" href="__ROOT__/public/lcbook.ico" type="image/x-icon">
    <link rel="icon" href="__ROOT__/public/lcbook.ico" type="image/x-icon">
    <link rel="stylesheet" href="__ROOT__/public/static/css/common.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/header.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/popBox.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/searchbar.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/content.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/footer.css">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="__ROOT__/public/static/font/font-awesome.min.css">
</head>

<body>
    <!-- 头部 -->
    {include file="./public/common/header.html"/}

    <!--搜索框  -->
    <div id="searchbar">
        <div class="searchbarBox">
            <div class="logo">
                <img src="__ROOT__/public/static/image/logo.png" alt="">
            </div>
            <div class="search">
                <!-- 禁止表单提交，改为Ajax提交 -->
                <form method="POST" onsubmit="return false">
                    <!-- 类别 -->
                    <select name="bclass" class="searchClass">
                        <option value="不限">不限</option>
                        {foreach $bclasses as $bclass}
                        <Option value="{$bclass.bclass}">{$bclass.bclass}</option>
                        {/foreach}
                    </select>

                    <!-- 搜索框+搜索按钮 -->
                    <div class="searchBtn">
                        <div>
                            <input type="text" name="bname" placeholder="&#xf002 搜索" />
                        </div>
                        <button type="submit" onclick="search()">搜索</button>
                    </div>

            </div>
        </div>
    </div>

    <!-- 内容显示 -->
    <div id="content">
        <!-- 导航 -->
        <div class="shopnav">
            <ul>
                <li onclick="ajaxHelper('不限', '')" class="activate_font">不限</li>
                {foreach $bclasses as $bclass}
                <li>|</li>
                <li onclick="ajaxHelper('{$bclass.bclass}', '')">{$bclass.bclass}</li>
                {/foreach}
            </ul>
        </div>
        <!-- 商品展示 -->
        <div class="shoplist">
            {foreach $books as $book}
            <div class="shopBox">
                <a href='{:url("shopdetail/shopdetail")}?bookID={$book.bookID}'>
                    <img src="__ROOT__/public/static/image/{$book.pictures}" alt=""></a>
                <p class="describe">{$book.bname}</p>
                <p class="price">￥</p>
                <!--整数部分-->
                <p class="price intnum">{$book.yourprice}</p>
                <!--小数部分-->
                <p class="price">.{$book.smallprice}元</p>

                <span class="selledNum">销量: {$book.SelledNum}</span>
                <a href='{:url("cart/addCart")}?bookID={$book.bookID}'>
                    <span class="toCart" onclick="toCart('{$book.bookID}')">&#xf217</span></a>
            </div>
            {/foreach}

            <div class="pageBox">
                <div class="page">{$page}</div>
            </div>
        </div>
    </div>


    <!--  底部-->
    {include file="./public/common/footer.html"/}


    <!-- js代码 -->
    <script src="__ROOT__/public/static/js/jquery-1.8.3.min.js"></script>
    <script src="__ROOT__/public/static/js/header.js"></script>
    <script>

        /*
        **将bookID的商品添加进购物车
        */
        function toCart(bookID) {
            // alert(bookID + "添加进购物车");
        }

        /**
        * 当搜索按钮被点击，获取表单数据，发起ajax请求
        **/
        function search() {
            bclass = $('select[name=bclass] option:selected').val();
            bname = $('input[name=bname]').val();
            ajaxHelper(bclass, bname);
        }


        /**
         * 发起ajax请求，根据关键字查找
         * @bclass 书本的类别
         * @bname  书本关键字
         **/
        function ajaxHelper(bclass, bname) {
            let parm = {
                bclass: bclass,
                bname: bname
            };

            //1、请求该分类的数据
            $.post("{:url('index')}", parm, function (data) {
                // 如果不够分页，直接拼上内容即可
                pagehtml = "";
                if (data.page) {
                    pagehtml = `<div class="pageBox">
                                        <div class="page">${data.page}</div>
                                    </div>`;
                }
                $('.shoplist').html(data.html + pagehtml);
            }, 'json');

            //2、改变导航的呈现形式
            $('.shopnav ul li').each(function () {
                if ($(this).text() == bclass) {
                    $(this).addClass('activate_font');
                } else {
                    $(this).removeClass('activate_font');
                }
            });
        }

        /**
            ajax实现分页
            页码被点击时，将页码传递过来
        */
        function AjaxPage(page) { //当前页码传递过来
            let bclass = "";
            //1、寻找当前的类别
            $('.shopnav ul li').each(function () {
                if ($(this).hasClass('activate_font')) {
                    bclass = $(this).text();
                }
            });


            $.ajax({
                //请求地址
                url: "{:url('index')}",
                type: 'post',
                dataType: 'json',
                data: { apage: page, bclass: bclass },
                success: function (data) {
                    // 如果不够分页，直接拼上内容即可
                    pagehtml = "";
                    if (data.page) {
                        pagehtml = `<div class="pageBox">
                                        <div class="page">${data.page}</div>
                                    </div>`;
                    }
                    $('.shoplist').html(data.html + pagehtml);
                }
            });
        }
    </script>
</body>
</html>